<template>
    <div class="monitorC">
        <div class="monitorC_title">
            <span>交通监控</span>
        </div>
        <div :id="`trafficVideo${domId}`" class="ws-player"></div>
        <div class="monitorC_close" @click="$emit('showViewViedo', false, '')"></div>
    </div>
</template>


<script>
import "videojs-contrib-hls";
import PlayerManager from "@/components/iccs/PlayerManager";

export default {
    name: "viewVideo",
    props: {
        videoId: String,
    },
    data() {
        return {
            initPlay:false,
            domId:0,
            channelList: [],
            myPlayer: null,
            playerOptions: {
                controls: true,
                playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
                autoplay: true, // 如果为true,浏览器准备好时开始回放。
                muted: true, // 默认情况下将会消除任何音频。
                loop: false, // 是否视频一结束就重新开始。
                techOrder: ["html5"],
                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: "zh-CN",
                aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    // {
                    //   type: "application/x-mpegURL", // 类型
                    //   src: "http://videocdn.renrenjiang.cn/Act-ss-m3u8-sd/1037359_1546064640169/1037359_1546064640169.m3u8", // url地址
                    // },
                ],
                poster: "", // 封面地址
                notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true, // 当前时间和持续时间的分隔符
                    durationDisplay: true, // 显示持续时间
                    remainingTimeDisplay: true, // 是否显示剩余时间功能
                    fullscreenToggle: true, // 是否显示全屏按钮
                },
            },
            player: {},
        }
    },
    watch: {
        videoId: {
            handler(newVal, oldVal) {
                // 处理 videoId 变化
                console.log('videoId changed from', oldVal, 'to', newVal)
                this.getVideoDom();
            },
            immediate: true
        }
    },
    mounted() {
        console.log('mounted')
        this.domId=new Date().valueOf()
        console.log('zhixing', this.videoId)
        // this.getVideoDom();
    },
    beforeDestroy() {
        console.log('guanbile')
        this.closeVideo()
    },

    methods: {
        getVideoDom(){
            let dom =document.getElementById(`trafficVideo${this.domId}`);
            if(dom){
                this.getVideo();
            }else{
                setTimeout(()=>{
                    clearTimeout()
                    this.getVideoDom()
                },200)
            }

        },
        getVideo() {
            try {
                console.log(this.initPlay,'this.initPlaythis.initPlay')
                if(window.initPlay&&this.myPlayer){
                    this.myPlayer.playRealVideo({
                        channelList: [{
                            // id: String(this.selectedFacility), /** 在线的通道id **/
                            id: String(this.videoId),
                            isOnline: true, /** 设备是否在线，非在线无法播放 **/
                        }],
                        streamType: "1"
                    })
                    return
                }
                this.myPlayer = new PlayerManager({
                    el: `trafficVideo${this.domId}`, // 实时预览容器id
                    // pztEl: "ws-pan-tilt", // 云台控制容器id
                    type: 'real', // real - 实时预览
                    maxNum: 1, // 最多显示的窗口
                    num: 1, // 初始化显示的窗口
                    showControl: false, // 默认是否显示工具栏
                    // serverIp: "172.22.12.15", // 代理IP
                    streamServerIp: "172.22.12.15", // 流媒体服务 Ip 地址 【如果拉流端口发生改变时，需拼接端口 】
                    // proxyServerIp: "http://localhost:85/", // 代理服务器 Ip 地址 【直连模式不传】
                    useNginxProxy: false, // 拉流模式 【true-代理模式拉流，false-直连拉流】
                    // receiveMessageFromWSPlayer, // 接收来自wsplayer的回调
                    /* 下面为播放器返回的回调函数，可以在下面监听各种回调事件 */
                    receiveMessageFromWSPlayer: (methods, data) => {
                        console.log(methods, '12345', this.videoId)
                        switch (methods) {
                            case 'initializationCompleted':
                                window.initPlay = true;
                                // 初始化完成，可调用播放方法（适用于动态加载解码库）
                                // 若回调未触发时就使用实时预览/录像回放，则无法播放。
                                // 此时我们可以调用一个
                                console.log("初始化播放器成功", data);
                                this.myPlayer.playRealVideo({
                                    channelList: [{
                                        // id: String(this.selectedFacility), /** 在线的通道id **/
                                        id: String(this.videoId),
                                        isOnline: true, /** 设备是否在线，非在线无法播放 **/
                                    }],
                                    streamType: "1"
                                })
                                break;
                            case "realSuccess": // 实时预览成功
                                console.log("实时预览成功")
                                break;
                            case "realError": // 实时预览失败
                                console.log("实时预览失败")
                                break;
                            case "talkError": // 对讲失败
                                console.log("对讲失败");
                                break;
                            case 'selectWindowChanged': // 选中的窗口发生改变
                                console.log([document.getElementById('trafficVideo')],'4545')
                                console.log(data, "返回窗口信息")
                                break;
                            case 'windowNumChanged': // 播放器显示的路数发生改变
                                console.log(data, "返回显示的窗口数量")
                                break;
                            case 'closeVideo': // 视频关闭回调
                                // 点击关闭按钮引发的视频关闭进行提示
                                // 切换视频引发的视频关闭不进行提示
                                if (!data.changeVideoFlag) {
                                    console.log(`窗口${data.selectIndex}的视频已关闭`)
                                }
                                break;
                            case 'statusChanged': // 视频状态发生改变
                                if(!this.start){
                                    setTimeout(()=>{
                                        clearTimeout()
                                        this.myPlayer.playRealVideo({
                                            channelList: [{
                                                id: String(this.videoId), /** 在线的通道id **/
                                                isOnline: true, /** 设备是否在线，非在线无法播放 **/
                                            }],
                                            streamType: "1",
                                        })
                                        this.start = true
                                    },100)
                                    window.initPlay=true;
                                }
                                break;
                            case 'errorInfo': // 错误信息汇总
                                // this.getVideo();
                                console.log(data, "可打印查看错误消息");
                        }
                    }
                })
            }catch (e){
                console.log(e)
            }
            // const res = getDevicePlayUrl({
            //     id: this.playMonotorId,
            //     streamType: 1
            // })
            // console.log('getVideo', res);
            // console.log("点击事件", this.selectedFacility);
            // if (res?.data?.data) {
            //     this.playerOptions.sources = (res.data.data || []).map(item => ({
            //         type: "application/x-mpegURL",
            //         src: "http://172.22.12.15:7086/live/cameraid/1000048%247/substream/1.m3u8"
            //     }));
            //
            //
            // }
        },
        closeNews() {
            this.$emit('showViewViedo', false, '')
        },
        closeVideo() {
            this.myPlayer.close(0)
            /*if (this.myPlayer != null) {
                // this.myPlayer.dispose()
                this.myPlayer = null
            }*/
        },
        closeViewViedo() {
            this.$emit('showViewViedo', false, '');
            console.log(this.$emit('showViewViedo', false, ''), '关闭弹窗')
            this.closeVideo();
        }
    }

}
</script>

<style lang="less" scoped>
.monitorC {
  position: relative;
  width: 662px;
  height: 440px;
  display: flex;
  overflow: hidden;
  background-size: 100% 100%;
  background-image: url("@/assets/news/bg_news.png");
  flex-direction: column;

  .ws-player {
    width: 95%;
    height: 82%;
    margin-left: 2.5%;
    margin-top: 1.5%;
  }

  &_title {
    margin-left: 22px;
    width: 216px;
    height: 24px;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_title1.png");

    span {
      height: 24px;
      font-size: 13px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #FFFFFF;
      margin-left: 11px;
      line-height: 24px;
      background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  &_close {
    position: absolute;
    right: 20px;
    cursor: pointer;
    top: 30px;
    width: 23px;
    height: 22px;
    background-size: 100% 100%;
    background-image: url("@/assets/news/icon_closenews.png");
  }

  .videoStyle {
    position: absolute;
    width: 560px;
    height: 260px;
    margin-left: 50px;
    max-height: 300px;
  }
}
</style>